<template>
  <div class="train-city">
    <!-- for-search -->
    <div class="cot">
      <!-- search组件 -->
      <div class="search">
        <div class="mask" v-show="showAction"></div>
        <van-search v-model="searchValue" :show-action="showAction" @focus="showAction=true" placeholder="城市名称">
          <template #action>
            <div class='cancel' @click="showAction=false">取消</div>
          </template>
        </van-search>
        <div class="context" v-show="searchList.length > 0&&showAction">
          <div class="c">
            <div class='txt'>
              <div class="block" v-for="(item, i) in searchList" :key="i">
                <div class="ln">
                  <span class='b'>{{item.name}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="boxs">
        <div class="letters">
          <span>当前</span>
          <span>热门</span>
          <span v-for="(letter, index) in letters" :class="{active: activeLetterIndex === index}" :key="letter" @touchstart="getCityByLetter(letter, index)">{{ letter }}</span>
        </div>
        <!-- 现在需要直接打开定位展示 -->
        <div ref="histroy">
          <div class="title">当前位置</div>
          <div class="box">
            <div class="li">
              <i :class="locCity.code?'loc':''">
                <van-icon v-show="locCity.code" name="location-o" color="#0dd66c" />
                {{locCity.name}}
              </i>
            </div>
          </div>
        </div>
        <div ref="hot">
          <div class="title">热门城市</div>
          <div class="box">
            <div class="li" v-for="(hot, i) in hotCitys" :key="i + hot.name">
              <i>{{ hot.name }}</i>
            </div>
          </div>
        </div>
        <div>
          <div class="title letterTitle">{{ letterCitys.length >0 ? letterAct : '' }}</div>
          <div class="box2">
            <div class="li" v-for="lcity in letterCitys" :key="lcity.Name">{{ lcity.name }}</div>
            <p class="noMore" v-show="letterCitys.length >0">暂无更多~</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Icon } from 'vant'

import $ajax from '../../../util/ajax'

export default {
  name: 'train-city',
  components: {
    [Search.name]: Search,
    [Icon.name]: Icon
  },
  data() {
    return {
      letters: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      letterAct: 'A',
      activeLetterIndex: 0,
      letterCitys: [
        {
          name: '徐州',
          code: '001'
        },
        {
          name: '上海',
          code: '002'
        }
      ],
      locCity: { name: '定位中...', code: '' },
      // 热门
      // 热门城市
      hotCitys: [
        {
          name: '徐州',
          code: '001'
        },
        {
          name: '上海',
          code: '002'
        }
      ],
      searchValue: '',
      searchList: [
        {
          name: '徐州',
          code: '001'
        },
        {
          name: '上海',
          code: '002'
        }
      ],

      showAction: false
    }
  },
  computed: {
    locCityText() {
      //   let txt = locTypeText[this.locType] || ''
      let txt = ''
      return txt
    }
  },
  mounted() {
    this.locOpen()
  },

  methods: {
    // 定位
    locOpen() {
      let geo = window.navigator.geolocation
      console.log(geo)
      // if (!!geo) {
      //   console.log('不支持定位')
      //   return
      // }
      geo.getCurrentPosition(
        position => {
          console.log(position)
          let coords = position.coords
          if (coords && coords.latitude && coords.longitude) {
            // 定位只有经纬度
            $ajax.jsonp(
              'https://passport.ly.com/member/mapservice.ashx?action=geocoding&coordtype=wgs84ll&output=json&pois=0&location=' +
                coords.latitude +
                ',' +
                coords.longitude,
              res => {
                console.log(res.text)
                let result = JSON.parse(res.text)
                let { addressComponent } = result.result
                this.locCity = {
                  name: addressComponent.city.replace(/市+$/, ''),
                  code: addressComponent.adcode
                }
              }
            )
          }
        },
        error => {
          console.log(error)
          let _location = { tips: '获取位置失败，请重试' }
          switch (error.code) {
            case error.PERMISSION_DENIED:
              _location.tips = '用户拒绝获取地理位置'
              break
            case error.POSITION_UNAVAILABLE:
              _location.tips = '用户拒绝获取地理位置'
              break
            case error.TIMEOUT:
              _location.tips = '获取用户位置请求超时'
              break
            case error.UNKNOWN_ERROR: //出现位置错误
              _location.tips = '获取位置失败，请重试'
              break
          }
          this.locCity = {
            name: '定位失败',
            code: ''
          }
          console.log(_location.tips)
        },
        {
          // 高精度
          enableHighAccuracy: true,
          // 响应对打时间 毫秒
          maximumAge: 30000,
          // 缓存最大时间 毫秒
          timeout: 30000
        }
      )
    },
    // 选择城市字母
    getCityByLetter(Letter, index) {
      console.log(Letter)
      this.activeLetterIndex = index
      this.letterAct = Letter
    }
  }
}
</script>

<style lang="less">
@import '~$common/funs.less';
@import './index.less';
</style>
